<template>
	<view>
		<view class="uni-padding-wrap">
			<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
				<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*2" @click="btnClick(index,item)">
					<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
						<view class="cu-tag badge" v-if="item.badge!=0">
							<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
						</view>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
			<uni-section title="工单详情列表" type="line">
				<view v-for="(item ,index) in gdcrderlist" :index="index" :key="index">
					<uni-card class="shh" v-if="item.gdjd == '1'" title="已受理" :extra="item._add_time_str">
						<p>单号:<text class="uni-body">{{item.gdh}}</text></p>
						<p>被举报人:<text class="uni-body">{{item.bjbr}}</text></p>
						<p>被举报部门:<text class="uni-body">{{item.bjbbm}}</text></p>
						<p>描述:<text class="uni-body">{{item.bxms}}</text></p>
						<p>姓名:<text class="uni-body">{{item.xm}}</text></p>
						<p>电话:<text class="uni-body">{{item.bxdh}}</text></p>
						<p v-if="item.editor"><text class="uni-body">处理结果:</text></p>
						<view v-if="item.editor" :key="indexz" class="imgstt">
							<uParse style="word-break:break-all" :content="item.editor" @preview="preview" @navigate="navigate"/>
						</view>
					</uni-card>
					<uni-card v-if="item.gdjd == '2'" title="处理中" :extra="item._add_time_str">
						<p>单号:<text class="uni-body">{{item.gdh}}</text></p>
						<p>被举报人:<text class="uni-body">{{item.bjbr}}</text></p>
						<p>被举报部门:<text class="uni-body">{{item.bjbbm}}</text></p>
						<p>描述:<text class="uni-body">{{item.bxms}}</text></p>
						<p>姓名:<text class="uni-body">{{item.xm}}</text></p>
						<p>电话:<text class="uni-body">{{item.bxdh}}</text></p>
						<p v-if="item.editor"><text class="uni-body">处理结果:</text></p>
						<view v-if="item.editor" :key="indexz" class="imgstt">
							<uParse style="word-break:break-all" :content="item.editor" @preview="preview" @navigate="navigate"/>
						</view>
					</uni-card>
					<uni-card v-if="item.gdjd == '3'" title="处理完成" :extra="item._add_time_str">
						<button @click="gopj(item)" type="primary">去评价</button>
						<p>单号:<text class="uni-body">{{item.gdh}}</text></p>
						<p>被举报人:<text class="uni-body">{{item.bjbr}}</text></p>
						<p>被举报部门:<text class="uni-body">{{item.bjbbm}}</text></p>
						<p>描述:<text class="uni-body">{{item.bxms}}</text></p>
						<p>姓名:<text class="uni-body">{{item.xm}}</text></p>
						<p>电话:<text class="uni-body">{{item.bxdh}}</text></p>
						<p v-if="item.imgs.length"><text class="uni-body">图片:</text></p>
						<view v-if="item.imgs.length" :key="indexz" class="imgstt" v-for="(img,indexz) in item.imgs">
							<image @click="imgyl(item.imgs,indexz)" style="width: 50px;height: 50px; background-color: #eeeeee;" :src="img.url" ></image>
						</view>
						<p v-if="item.editor"><text class="uni-body">处理结果:</text></p>
						<view v-if="item.editor" :key="indexz" class="imgstt">
							<uParse style="word-break:break-all" :content="item.editor" @preview="preview" @navigate="navigate"/>
						</view>
					</uni-card>
					<uni-card v-if="item.gdjd == '4'" title="待评价" :extra="item._add_time_str">
						<p>单号:<text class="uni-body">{{item.gdh}}</text></p>
						<p>被举报人:<text class="uni-body">{{item.bjbr}}</text></p>
						<p>被举报部门:<text class="uni-body">{{item.bjbbm}}</text></p>
						<p>描述:<text class="uni-body">{{item.bxms}}</text></p>
						<p>姓名:<text class="uni-body">{{item.xm}}</text></p>
						<p>电话:<text class="uni-body">{{item.bxdh}}</text></p>
						<p v-if="item.imgs.length"><text class="uni-body">图片:</text></p>
						<view v-if="item.imgs.length" :key="indexz" class="imgstt" v-for="(img,indexz) in item.imgs">
							<image @click="imgyl(item.imgs,indexz)" style="width: 50px;height: 50px; background-color: #eeeeee;" :src="img.url" ></image>
						</view>
						<p v-if="item.editor"><text class="uni-body">处理结果:</text></p>
						<view v-if="item.editor" :key="indexz" class="imgstt">
							<uParse style="word-break:break-all" :content="item.editor" @preview="preview" @navigate="navigate"/>
						</view>
					</uni-card>
				</view>
				
			</uni-section>
			<page-foot foot="监督服务"></page-foot>
		</view>
	</view>
</template>


<script>
	var _this;
	var vk = uni.vk;
	import UniCard from "@/pages_modules/components/uni-card/uni-card";
	import uniDateformat from "@/pages_modules/components/uni-dateformat/uni-dateformat";
	import uParse from "@/pages_modules/components/feng-parse/parse.vue"
	export default {
		components: {UniCard,uniDateformat,uParse},
		data() {
			// 页面数据变量
			return {
				gridBorder: false,
				gridCol: 4,
				cuIconList: [{
					cuIcon: 'servicefill',
					color: 'red',
					badge: 0,
					name: '已受理'
				},{
					cuIcon: 'timefill',
					color: 'yellow',
					badge: 0,
					name: '处理中'
				},{
					cuIcon: 'check',
					color: 'cyan',
					badge: 0,
					name: '处理完成'
				},{
					cuIcon: 'selection',
					color: 'olive',
					badge: 0,
					name: '已评价'
				}
				],
				jjbxdh:'',
				userinfo:{},
				options:{},
				gdcrderlist:[],
				gdcrderlistbygdzt:[],
				gdlist: [{
						url: '/static/c1.png',
						text: '已受理',
						badge: '0',
						type: "error"
					},
					{
						url: '/static/c2.png',
						text: '处理中',
						badge: '0',
						type: "warning"
					},
					{
						url: '/static/c3.png',
						text: '处理完成',
						badge: '0',
						type: "warning",
						type: "primary",
					},
					{
						url: '/static/c4.png',
						text: '已评价',
						badge: '0',
						type: "success",
					}
				]
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		async onLoad(options = {}) {
			_this = this;
			vk = uni.vk;
			this.options = options;
			this.init(options);
			this.userinfo = vk.getVuex('$user.userInfo');

			await this.getxybxgdlist(this.userinfo._id,'1');
			//await this.getvkGlobalData()
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){
			
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			
		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {
			
		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {
			
		},
		// 函数
		methods: {
			btnClick(index,item){
				switch(index) {
				     case 0: this.getxybxgdlistbyGdzt('1');break;
				     case 1: this.getxybxgdlistbyGdzt('2');break;
					 case 2: this.getxybxgdlistbyGdzt('3');break;
					 case 3: this.getxybxgdlistbyGdzt('4');break;
					 default : break;
				} 
			},
			gopj(item){
				vk.redirectTo('/pages_modules/fwjdpt/fwjdptpj?itemid='+item._id+'&wxid='+item.wxid);
			},
			imgylOne(listy,i){
				uni.previewImage({
					current:i,
					urls: [listy],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + i) + '个按钮,第' + (data.index + i) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			imgyl(listy,i){
				let temp = []
				for (let z = 0; z < listy.length; z++) {
					//temp = listy[z].url
					temp.push(listy[z].url)
				}
				// console.log(listy)
				// console.log(i)
				// console.log(temp)
				uni.previewImage({
					current:i,
					urls: temp,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + i) + '个按钮,第' + (data.index + i) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			getvkGlobalData(){return vk.callFunction({
				  url: 'client/gsxy/xybx/pub/xybxapi.getvkGlobalData',title:'请求中...',data:{}}).then((data) => {this.jjbxdh = data.info.value;}).catch((err) => {});
			},
			MymakePhoneCall(ipen){
				uni.makePhoneCall({
					phoneNumber: ipen 
				});
			},
			getxybxgdlistbyGdzt(gdjd){
				_this.gdcrderlist = []
				for (let i = 0; i < _this.gdcrderlistbygdzt.length; i++) {
					if(gdjd == _this.gdcrderlistbygdzt[i].gdjd){
						_this.gdcrderlist.push(_this.gdcrderlistbygdzt[i])
					}
				}
			},
			getxybxgdlist(wxid,gdjd){
				// promise方式
				return vk.callFunction({
				  url: 'client/jp/pub/jdfwpt-obj.getxybxgdlist',
				  title:'请求中...',
				  data:{
				    wxid:wxid,
					gdjd:gdjd
				  }
				}).then((data) => {
				  
					_this.cuIconList[0].badge = data.num1;
					_this.cuIconList[1].badge = data.num2;
					_this.cuIconList[2].badge = data.num3;
					_this.cuIconList[3].badge = data.num4;
				  _this.gdcrderlist = data.list
				  _this.gdcrderlistbygdzt = data.list
				}).catch((err) => {
				  console.log(err)
				});
			},
			// 页面数据初始化函数
			init(options){
				//vk.reLaunch("/pages_template/uni-id/index/index");
			},
			pageTo(path){
				vk.navigateTo(path);
			}
		},
		// 监听器
		watch:{
			
		},
		// 计算属性
		computed:{
			
		}
	}
</script>
<style lang="scss" scoped>
	.shh{
		margin-bottom: 30px;
	}
	.layui-elem-field {
		border-style: solid;
	}
	.layui-field-title {
		border-width: 1px 0 0;
	}
	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	
	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	.grid-dot {
		position: absolute;
		top: 5px;
		right: 1px;
	}
	.imgstt{
		padding: 6px;
	}
</style>